﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>js表单校验</title>
</head>
<body>
    <div class="">
        <form action="javaScript练习1.html" menthod="post" class="" onsubmit="return checkForm()">
            用户名：&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" name="username" value="" id="usernameID" onkeyup="checkUsername()" /><br />
            <span><font color="red" id="usernameMsg"></font></span>
            <br />

            密&nbsp;&nbsp;&nbsp;&nbsp;码：&nbsp;&nbsp;&nbsp;&nbsp;<input type="password" name="password1" value="" id="passwordID1" onkeyup="checkPassword()" /><br />
            <span><font color="red" id="passwordMsg"></font></span>
            <br />

            确认密码：<input type="password" name="password2" value="" id="passwordID2" onkeyup="checkPassword2()"><br />
            <span><font color="red" id="passwordMsg2"></font></span>
            <br />

            邮&nbsp;&nbsp;&nbsp;&nbsp;箱：&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" name="youxiang" value="" id="youxiangID" onkeyup="checkYouxiang()"><br />
            <span><font color="red" id="youxiangMsg"></font></span>
            <br />
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <input type="submit" value="提交">&nbsp;&nbsp;&nbsp;&nbsp;
            <input type="reset" value="重置">
        </form>
    </div>

    <script type="text/javascript">
		//1.定义全局变量，用来存放或返回对象值
		//存放
		var usernameObj;
		var passwordObj;
		var passwordObj2;
		var youxiangObj;
		//返回
		var usernameMsg;
		var passwordMsg;
		var passwordMsg2;
		var youxiangMsg;

		//2.页面加载之后, 获取页面中的对象,通过id来获取
		window.onload = function () {
			//输入控件的标记对象
			usernameObj = document.getElementById("usernameID");
			passwordObj = document.getElementById("passwordID1");
			passwordObj2 = document.getElementById("passwordID2");
			youxiangObj = document.getElementById("youxiangID");

			//回显错误信息的标记对象
			usernameMsg = document.getElementById("usernameMsg");
			passwordMsg = document.getElementById("passwordMsg");
			passwordMsg2 = document.getElementById("passwordMsg2");
			youxiangMsg = document.getElementById("youxiangMsg");
		}

		//3.验证
		//3.1验证用户名
		function checkUsername() {
			//获取usernameObj对象值存放到一个局部变量中（获取用户名）
			var value = usernameObj.value;
			//规定正则式,存放到一个局部变量中（创建正则表达式来校验用户名）
			var regex = /^[a-zA-Z_]\w{0,9}$/;// 字母数字下划线开始，长度1到10位, 不能是数字开头
			//校验
			if(value===""){// !value 等同于 value==""
				usernameMsg.innerHTML = "用户名不能为空";
				return false;//不符合规范，返回false
			}else if(!regex.test(value)){
				usernameMsg.innerHTML = "字母数字下划线开始，长度1到10位, 不能是数字开头";
				return false;
			}else{
				//如果符合规范，将回显的错误信息清空
				usernameMsg.innerHTML = "";
				return true;
			}
		}
		//3.2验证密码
		//获取密码值
		function checkPassword() {
			//获取密码值
			var value = passwordObj.value;
			//规定正则表达式
			var regex = /^.{6,12}$/;//任意字符，6到12位
			//判断
			if (!value) {
				passwordMsg.innerHTML = "密码不能为空，请输入";
				return false;
			} else if (!regex.test(value)) {
				passwordMsg.innerHTML = "输入字符为6到12位";
				return false;
			} else {
				passwordMsg.innerHTML = "";
				return true;
            }
		}
		//3.3两次密码是否相同验证
		function checkPassword2() {
			var value1 = passwordObj.value;
			var value2 = passwordObj2.value;

			if (!value2) {
				passwordMsg2.innerHTML = "密码不能为空，请输入密码";
				return false;
			} else if (value1 !== value2) {
				passwordMsg2.innerHTML = "两次密码输入不一致";
				return false;
			} else {
				passwordMsg2.innerHTML = "";
				return true;
            }
         }
		//3.4邮箱验证
		function checkYouxiang() {
			var value = youxiangObj.value;
			var regex = /^[\w-]+@([\w-]+\.)+[a-zA-Z]{2,4}$/;
			if (!value) {
				youxiangMsg.innerHTML = "邮箱不能为空";
				return false;
            } else if (!regex.test(value)) {
				youxiangMsg.innerHTML = "邮箱格式不合法";
				return false;
			} else {
				youxiangMsg.innerHTML = "";
				return true;
            }
        }
		//提交时表单验证
		function checkForm() {
			//定义变量用来接收返回的布尔值
			var username = checkUsername();
			var password1 = checkPassword();
			var password2 = checkPassword2();
			var youxiang = checkYouxiang();
            return username && password1 && password2 && youxiang; //如果返回的全为true;如果有一个false,事件将被取消
        }
    </script>
</body>
</html>